<template>
  <div class="setting-model-list-view">

    <modules-title class="title-position" titleName="项目模板设置">

      <template slot="btn">
        <el-button
          type="primary"
          size="mini"
          @click="createModel">新增模板</el-button>
      </template>

    </modules-title>

    <div class="pj-content">
      <div class="screen-view">

        <el-form
          ref="queryForm"
          :model="screenData"
          :inline="true"
          label-width="68px"
        >

          <el-form-item label="项目阶段">
            <el-select
              v-model="screenData.project_phases_id"
              placeholder="请选择阶段"
              size="small"
              @change="typeChange"
            >
              <el-option
                v-for="dict in phasesOptions"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="项目状态">
            <el-select
              v-model="screenData.status"
              placeholder="请选择状态"
              size="small"
              @change="statusChange"
            >
              <el-option
                v-for="dict in status"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="模板名称">
            <el-input v-model="screenData.name" placeholder="请输入名称" clearable></el-input>
          </el-form-item>

          <el-form-item>

            <el-button type="primary" size="small" @click="handleQuery">搜索
            </el-button>
            <el-button plain size="small" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div class="tab-view">

        <el-table
          @row-click="tableRowClick"
          size="medium"
          v-loading="loading"
          :data="tableData"
          align="center"
          border
          style="width: 100%">
          <el-table-column
            align="left"
            header-align="center"
            prop="project_template_name"
            label="模板名称">
          </el-table-column>
          <el-table-column
            align="center"
            prop="project_phases_name"
            label="适用项目阶段">
          </el-table-column>
          <el-table-column
            align="center"
            prop="project_category_name"
            label="适用申报类别">
          </el-table-column>
          <el-table-column
            align="center"
            prop="creator_name"
            label="创建人">
          </el-table-column>
          <el-table-column
            align="center"
            prop="project_category_name"
            label="状态">
            <template slot-scope="scope">
              <span v-if="scope.row.status == 1" class="status-color1">已停用</span>
              <span v-else-if="scope.row.status == 2" class="status-color6">已启用</span>
            </template>
          </el-table-column>
          <el-table-column
            align="left"
            header-align="center"
            label="操作">
            <template slot-scope="scope">

              <div class="tab-opt-view">

                <div>
                  <el-button
                    v-if="scope.row.status == 1"
                    size="medium"
                    type="text"
                    @click="editClick(scope.row)">
                    编辑
                  </el-button>
                </div>
                <div>
                  <el-button
                    v-if="(scope.row.status == 1 && scope.row.project_task.length > 0)"
                    size="medium"
                    type="text"
                    @click="updateStatus(scope.row.id)">
                    启用
                  </el-button>
                </div>
                <div>
                  <el-button
                    v-if="scope.row.status == 2"
                    class="text-btn-red" size="medium"
                    type="text"
                    @click="updateStatus(scope.row.id)">
                    停用
                  </el-button>
                </div>
                <div>
                  <el-button
                    size="medium"
                    type="text"
                    @click="copyClick(scope.row)">
                    复制
                  </el-button>
                </div>
                <div>
                  <el-button
                    v-if="scope.row.status == 1"
                    class="text-btn-red"
                    size="medium"
                    type="text"
                    @click="deleteClick(scope.row.id)">
                    删除
                  </el-button>
                </div>

              </div>

            </template>
          </el-table-column>
        </el-table>

        <!--      <pagination style="display:flex;justify-content:flex-end;" :total="total" :page.sync="pageNum"-->
        <!--                  :limit.sync="pageSize" @pagination="getList" />-->

      </div>
    </div>




    <el-dialog
      v-if="dialogVisible"
      title="新增模板"
      :visible.sync="dialogVisible"
      width="500px"
      append-to-body
      :before-close="handleClose">

      <el-form ref="form" :model="datas" class="demo-form-inline" :rules="rules" label-width="120px" label-position="left">
        <el-form-item label="项目模板名称" prop="project_template_name">
          <el-input v-model="datas.project_template_name" placeholder="请输入项目模板名称" style="width: 185px" clearable></el-input>
        </el-form-item>
        <el-form-item label="适用项目阶段" prop="project_phases_id">
          <el-select v-model="datas.project_phases_id" placeholder="请选择阶段" clearable @change="stageChange">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="适用申报类别" prop="project_category_id">
          <el-select v-model="datas.project_category_id" placeholder="请选择申报类别" clearable @change="categoryChange">
            <el-option
              v-for="(item,index) in options2"
              :key="index"
              :label="item.dict_val"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

      </el-form>

      <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="documentConfirm1">保存并继续</el-button>
          <el-button type="primary" @click="documentConfirm">保 存</el-button>
        </span>
    </el-dialog>

  </div>
</template>

<script>
    export default {
        name: 'Index',
        data: function() {
            var validatePass = (rule, value, callback) => {
                if (value) {
                    this.$api.PROJECT_TEMPLATE_EXIST(value).then(res=>{
                        if (res.code == 200){
                            if (res.data){
                                callback("模板名称已存在");
                            }else{
                                callback()
                            }
                        }else {
                            this.$message.error(res.msg);
                            callback()
                        }

                    }).catch(err=>{
                        callback();
                        this.$message.error(err);
                    })
                }
            };
            return {
                input: '',
                tableData: [],
                total:0,
                pageNum:1,
                pageSize:10,
                loading:false,

                dialogVisible:false,
                datas:{},
                options: [
                    {
                        label: "临床前研究",
                        value: "1",
                    },
                    {
                        label: "临床研究",
                        value: "2",
                    },
                ],
                options2: [],

                screenData:{
                    name:'',
                    project_phases_id:"",
                    status:0,
                },
                phasesOptions: [
                    {
                        label: "全部",
                        value: "",
                    },
                    {
                        label: "临床前研究",
                        value: "1",
                    },
                    {
                        label: "临床研究",
                        value: "2",
                    },
                ],
                status:[
                    {
                        label: "全部",
                        value: 0,
                    },
                    {
                        label: "已停用",
                        value: 1,
                    },
                    {
                        label: "已启用",
                        value: 2,
                    },
                ],
                rules: {
                    project_template_name: [
                        { required: true, message: '请输入项目模板名称', trigger: 'blur' },
                        { validator: validatePass, trigger: 'blur' }
                    ],
                    project_phases_id: [
                        { required: true, message: '请选择适用项目阶段', trigger: 'change' }
                    ],
                    project_category_id: [
                        { required: true, message: '请选择申报类别', trigger: 'change' }
                    ],
                },
            }
        },
        mounted: function() {
            this.getList();
            this.getBaseData()
        },
        methods: {
            tableRowClick:function(row, column, event){
                if (column.label != '操作'){

                    this.$router.push({ name: 'modeSettingDetails',query:{id:row.id}})
                }
            },
            getBaseData:function(){

                if (this.$store.getters.sysDic('regist_type')){
                    this.options2 = this.$store.getters.sysDic('apply_type');
                }else {
                    this.$store.dispatch("sys/getSysAllDic").then(data=>{
                        this.options2 = data['apply_type'];
                    })
                }
            },
            getList() {
                let data = {...this.screenData}
                if (data.project_phases_id){
                    data.project_phases_id = data.project_phases_id + ""
                }else {
                    data.project_phases_id = ""
                }
                this.$api.PROJECT_TEMPLATE_LIST(this.screenData).then((res)=>{
                    this.loading = false;
                    if (res.code == 200){
                        this.tableData = res.data.data
                        this.total = res.data.total;
                    }else {
                        this.$message.error(res.msg)
                    }
                }).catch((err)=>{

                })
            },
            detailsClick: function(id) {
                this.$router.push({ name: 'modeSettingDetails',query:{id:id}})
            },
            editClick: function(item) {
                this.$router.push({ name: 'modeSettingEdit',query:{id:item.id}})
            },
            copyClick:function(item){
                this.$router.push({ name: 'modeSettingEdit',query:{copy_id:item.id}})
            },
            createModel:function () {
                //this.$router.push({ name: 'modeSettingEdit' })


                this.datas = {
                    project_template_name:'',
                    project_phases_id:"",
                    project_phases_name:'',
                    project_category_id:"",
                    project_category_name:'',
                    project_task:[],
                    status:1,
                }

                this.dialogVisible = true;
            },
            deleteClick:function (id) {

                this.$confirm('此操作将永久删除该模板, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$api.PROJECT_TEMPLATE_DELETE(id).then((res)=>{
                        if (res.code == 200){
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.getList();
                        }else {
                            this.$message.error(res.msg)
                        }
                    }).catch((err)=>{

                    })

                }).catch(() => {
                    // this.$message({
                    //     type: 'info',
                    //     message: '已取消删除'
                    // });
                });

            },
            updateStatus:function (id) {
                this.$api.PROJECT_TEMPLATE_STATUS(id).then(res=>{
                    if (res.code == 200){
                        this.$message.success('更新成功')
                        this.getList();
                    }else {
                        this.$message.error(res.msg)
                    }
                }).catch(err=>{

                })
            },
            handleClose:function () {
                this.dialogVisible = false
            },
            stageChange:function(value){
                let index = this.options.findIndex(a=>a.value == value)
                if (index != -1){
                    let data = this.options[index]
                    this.datas.project_phases_id = data.value;
                    this.datas.project_phases_name = data.label;
                }

            },
            categoryChange:function(value){
                let index = this.options2.findIndex(a=>a.id == value)
                if (index != -1){
                    let data = this.options2[index]
                    this.datas.project_category_id = data.id;
                    this.datas.project_category_name = data.dict_val;
                }
            },
            documentConfirm:function () {

                if (this.$refs.form){
                    this.$refs.form.validate((valid)=>{
                        if (valid){
                            this.$api.PROJECT_TEMPLATE_CREATE(this.datas).then((res)=>{
                                if (res.code == 200){
                                    this.dialogVisible = false
                                    this.getList();
                                }else {
                                    this.$message.error(res.msg)
                                }
                            }).catch((err)=>{

                            })

                        }
                    })
                }

            },
            documentConfirm1:function () {

                if (this.$refs.form){
                    this.$refs.form.validate((valid)=>{
                        if (valid){
                            this.$api.PROJECT_TEMPLATE_CREATE(this.datas).then((res)=>{
                                if (res.code == 200){
                                    this.dialogVisible = false
                                    this.$router.push({ name: 'modeSettingEdit' ,query:{id:res.data}})
                                }else {
                                    this.$message.error(res.msg)
                                }
                            }).catch((err)=>{

                            })

                        }
                    })
                }

            },
            typeChange:function (value) {
                this.getList();
            },
            statusChange:function (value) {
                this.getList();
            },
            handleQuery:function () {

                this.getList();
            },
            resetQuery:function () {
                this.screenData.name = "";
                this.screenData.project_phases_id = "";
                this.screenData.status = 0;
                this.getList();
            }
        }
    }
</script>

<style lang="scss">
  @import "../../../../assets/scss/views/setting/model/list.scss";
</style>
